Рендеринг на стороне сервера с Angular 5 и AspNetCore 2.1
Я пытаюсь сделать две вещи в Angular 5 (потому что это то, что использует официальная тема компании) с использованием AspNetCore 2.1:
- Безопасный СигналР
- В моем компоненте должен быть TemplateUrl, указывающий на контроллер MVC (например, /charts/bybu)
Первая пуля мне довольно удобна, но вторая заставляет меня вырывать волосы. Я предполагаю, что это в основном связано с созданием нового -app с build:ssr в package.json, добавлением UseSpaPrerendering с опцией AngularCliBuilder, но я начинаю заблудиться в app.modules.ts, учитывая важность RouterModule, forRoot и провайдеров Немного о app.server.modules, tsconfig.server.json и обо всем, что нужно.
Полагаю, я просто не понимаю, что является обязательным, что хорошо иметь и почему. Если меня спросят, какой пример кода нужен, я с радостью предоставлю его. Я начну с package.json первым
{
"name": "MIS2",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "ng build --aot false -app ssr",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/cli": "1.7.4",
"@angular/compiler": "^5.2.0",
"@angular/core": "5.2.11",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser-dynamic": "5.2.9",
"@angular/platform-server": "5.2.9",
"@angular/router": "^5.2.0",
"@aspnet/signalr": "^1.0.0",
"@nguniversal/module-map-ngfactory-loader": "5.0.0",
"@types/highcharts": "^5.0.25",
"@webcomponents/custom-elements": "^1.1.2",
"ag-grid": "^18.1.1",
"ag-grid-angular": "^18.1.0",
"angular-auth-oidc-client": "4.1.0",
"angular-highcharts": "5",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"d3": "^5.5.0",
"highcharts": "^6.1.1",
"highcharts-angular": "2.0.1",
"highcharts-custom-events": "^2.1.4",
"jquery": "^3.3.1",
"less": "^3.7.1",
"less-loader": "^4.1.0",
"ngrx": "^2.0.1",
"ngx-bootstrap": "3.0.1",
"node-sass": "^4.9.1",
"schema-utils": "^0.4.5",
"source-map": "^0.7.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.4",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular-devkit/core": "0.3.2",
"@angular/cdk": "^5.2.5",
"@angular/common": "^5.2.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@angular/platform-browser": "^5.2.4",
"@types/chartist": "^0.9.42",
"@types/d3": "^5.0.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"angular-router-loader": "0.8.5",
"autoprefixer": "^7.2.3",
"circular-dependency-plugin": "^4.2.1",
"clean-webpack-plugin": "0.1.19",
"codelyzer": "^4.0.1",
"copy-webpack-plugin": "~4.4.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "3.2.0",
"istanbul-instrumenter-loader": "^3.0.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"popper.js": "^1.14.3",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.10",
"postcss-url": "^7.1.2",
"protractor": "^5.3.2",
"raw-loader": "^0.5.1",
"rxjs": "^5.5.11",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"ts-loader": "4.4.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "^1.1.8",
"url-loader": "^0.6.2",
"webpack": "^4.16.0",
"webpack-cli": "3.0.8"
}
}
Я был бы очень признателен, зная, почему, когда я перехожу через это руководство на сайте Microsoft, оно не работает для меня.