我的应用程序用于APP_INITIALIZER在初始化应用程序之前从 json 文件动态检索一些配置。
当使用 Angular Universal 时，延迟加载的模块是在使用时返回的承诺APP_INITIALIZER解决之前在服务器端创建的。
当不使用角度通用时，这效果很好。这是角度通用的错误，还是我做错了什么？
应用程序模块.ts
export function loadConfigService(configService: AppConfigService): Function
{
return () => {
return configService.load();
};
}
@NgModule({
//...
providers: [
{
provide: APP_INITIALIZER,
useFactory: loadConfigService,
deps: [AppConfigService],
multi: true
},
应用程序配置.service.ts
export class AppConfig
{
readonly apiUrl: string;
//other properties
}
export let APP_CONFIG: AppConfig;
@Injectable()
export class AppConfigService
{
constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('serverUrl') protected serverUrl: string)
{
}
public load()
{
console.log('in load'); …我正在使用 Angular Universal 和 domino 在 Express 服务器上“伪造”DOM 服务器端。一切都工作正常，直到出现npm cache clean --force，然后出现 anpm install
我收到以下错误：
\n\n/path/to/app/src/gui/dist/server/server.js:2378\n */(s),2))[0],l=i[1]),this.engine.listen(this.namespaceId,a,s,l,function(e){var t=e._data||-1;o.factory.scheduleListenerCallback(t,n,e)})}return this.delegate.listen(e,t,n)},t}(h);var g=function(e){function t(t,n,r){return e.call(this,t.body,n,r)||this}return Object(r.c)(t,e),t=Object(r.b)([Object(i.Injectable)(),Object(r.e)(0,Object(i.Inject)(l.DOCUMENT)),Object(r.d)("design:paramtypes",[Object,s.AnimationDriver,s["\xc9\xb5AnimationStyleNormalizer"]])],t)}(s["\xc9\xb5AnimationEngine"]);function v(){return Object(s["\xc9\xb5supportsWebAnimations"])()?new s["\xc9\xb5WebAnimationsDriver"]:new s["\xc9\xb5CssKeyframesDriver"]}function y(){return new s["\xc9\xb5WebAnimationsStyleNormalizer"]}function b(e,t,n){return new f(e,t,n)}var w=new i.InjectionToken("AnimationModuleType"),_=[{provide:a.AnimationBuilder,useClass:u},{provide:s["\xc9\xb5AnimationStyleNormalizer"],useFactory:y},{provide:s["\xc9\xb5AnimationEngine"],useClass:g},{provide:i.RendererFactory2\n\nTypeError: Right-hand side of \'instanceof\' is not an object\n at bt (/path/to/app/src/gui/dist/server/server.js:2378:180688)\n at yt (/path/to/app/src/gui/dist/server/server.js:2378:180563)\n at ir (/path/to/app/src/gui/dist/server/server.js:2378:203358)\n at We.insertToken (/path/to/app/src/gui/dist/server/server.js:2378:179949)\n at /path/to/app/src/gui/dist/server/server.js:2378:183251\n at kt (/path/to/app/src/gui/dist/server/server.js:2378:183266)\n at Xe (/path/to/app/src/gui/dist/server/server.js:2378:178211)\n at Object.parse (/path/to/app/src/gui/dist/server/server.js:2378:177177)\n at Object.t.createDocument (/path/to/app/src/gui/dist/server/server.js:2833:9750)\n at Object.t.createWindow (/path/to/app/src/gui/dist/server/server.js:2833:10129)\n错误发生在domino的HTMLParser.js中，第2177行，位于以下几行：
\n\n …我有一个托管在 Firebase 中的 SPA，并且我一直在使用 Firestore 来存储数据。我还使用云函数进行一些 https 操作和某些其他数据库读写。
最近，我使用角度通用更新了从客户端到服务器端的渲染逻辑，这是非常成功的。这是我点击的链接：https ://fireship.io/lessons/angular-universal-firebase/
基本上，我创建了一个 https 函数来在云函数中渲染 ssr。
const universal = require(`${process.cwd()}/dist/server`).app;
exports.api = functions.https.onRequest(app); //Application related endpoint line makepayment, createorder etc.,
exports.ssr = functions.https.onRequest(universal);
现在，一旦我部署了这个函数，api https我曾经访问db.collection
或db.doc开始抛出错误的所有函数。以下是对 的相同调用db.doc。
db.doc("samplecollection/docid")
.get()
.then(function (doc) {
console.log('doc.data', doc.data());
})
.catch(function (error) {
console.log('Error in fetching samplecollection doc', error);
});
现在，当我尝试执行上述操作时，出现以下错误。
Error in autogenerated TypeError [ERR_INVALID_ARG_TYPE]: The "path"
argument must be of type string. Received type object
at validateString …node.js firebase angular-universal angular google-cloud-firestore
我正在使用角度通用，一切工作正常，除了当我点击邮递员的网址时，我的样式没有应用到应用程序上。在浏览器中它呈现样式。
所有组件 css 都已应用，但 style.scss 中编写的 css 未应用。
这是存储库链接，您可以在其中查看所有代码。 https://github.com/sudhir-j-sapkal/angular-seo-universal?organization=sudhir-j-sapkal
我需要根据浏览器平台动态导入库。防止 Angular Universal 因为使用 window 对象而给出错误。
import * as Muuri from 'muuri';
所以我想要的是这样的：
if (isPlatformBrowser(this.platform)) {
import * as Muuri from 'muuri';
}
else {
declare var Muuri;
}
显然这是行不通的。
老实说，我觉得这种情况不断变化很烦人。我在这里用更简单的 Angular 版本解决了这个问题：
但现在这种说法已经过时了。不再生成 server.js，而是必须修改web.config以指向main.js，这听起来像是一个改进。我将我的yaml更新为：
pool:
name: Azure Pipelines
steps:
- task: gittools.gitversion.gitversion-task.GitVersion@5
displayName: GitVersion
- task: NodeTool@0
displayName: 'Use Node 12.x'
inputs:
versionSpec: 12.x
- task: Npm@1
displayName: 'npm install angular cli'
inputs:
command: custom
verbose: false
customCommand: 'install @angular/cli -g'
- task: Npm@1
displayName: 'npm install'
inputs:
verbose: false
- task: Npm@1
displayName: 'npm build'
inputs:
command: custom
verbose: false
customCommand: 'run build:ssr'
- task: CopyFiles@2
displayName: …我目前正在尝试按照Angular Universal 的官方 Angular 指南将服务器端渲染（SSR）添加到我的 Angular 应用程序中。我能够设置快速服务器，并且从服务器获得的响应包含我的应用程序，尽管看起来有点奇怪，好像缺少一些 CSS 导致FontAwesome图标渲染太大等。
但出于某种原因，客户端/浏览器永远不会接管（重新）渲染，并且网站保持与服务器响应相同。它不是交互式的并且完全静态。单击控件（链接除外）或交互元素时，没有任何反应。
在这里您可以看到部分App Shell / HTML。
这是网络流量。
package.json ：
{
"name": "my-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run my-app:serve-ssr",
"serve:ssr": "node dist/my-app/server/main.js",
"build:ssr": "ng build --prod && ng run my-app:server:production",
"prerender": "ng run my-app:prerender"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^10.0.14",
"@angular/common": "^10.0.14",
"@angular/compiler": …我正在尝试在 Angular 应用程序版本 11 中实现预渲染。
运行命令后 npm run prerender我收到以下错误
Unable to extract routes from application.
我的应用程序模块
const routes: Routes = [
{
path: '',
loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
}
];
页面模块
const routes: Routes = [
{
path: '',
component: PageComponent,
children: [
{
path: '',
loadChildren: () => import('./home-page/home-page.module').then(m => m.HomePageModule),
},
{
path: 'about',
component: AboutComponent
},
{
path: 'tariff',
component: TariffComponent
},
{
path: 'contact',
component: ContactComponent
}
]
}
];
我创建了一个routes.txt文件并添加了以下几行 …
{
"$schema":"./node_modules/@angular/cli/lib/config/schema.json",
"version":1,
"newProjectRoot":"projects",
"projects":{
"new-asasa":{
"projectType":"application",
"schematics":{
},
"root":"",
"sourceRoot":"src",
"prefix":"app",
"architect":{
"build":{
"builder":"@angular-devkit/build-angular:browser",
"options":{
"outputPath":"dist/new-asasa/browser",
"index":"src/index.html",
"main":"src/main.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"tsconfig.app.json",
"aot":true,
"assets":[
"src/favicon.ico",
"src/assets"
],
"styles":[
"src/styles.scss",
"node_modules/intl-tel-input/build/css/intlTelInput.css",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
"scripts":[
"node_modules/intl-tel-input/build/js/intlTelInput.min.js",
"node_modules/jquery/dist/jquery.min.js"
],
"allowedCommonJsDependencies":[
"rxjs-compat",
"lodash"
]
},
"configurations":{
"production":{
"fileReplacements":[
{
"replace":"src/environments/environment.ts",
"with":"src/environments/environment.prod.ts"
}
],
"optimization":true,
"outputHashing":"all",
"sourceMap":false,
"namedChunks":false,
"extractLicenses":true,
"vendorChunk":false,
"buildOptimizer":true,
"budgets":[
{
"type":"initial",
"maximumWarning":"4mb",
"maximumError":"7mb"
},
{
"type":"anyComponentStyle",
"maximumWarning":"20kb",
"maximumError":"20kb"
}
]
}
}
},
"serve":{
"builder":"@angular-devkit/build-angular:dev-server",
"options":{
"browserTarget":"new-asasa:build"
},
"configurations":{
"production":{
"browserTarget":"new-asasa:build:production"
}
} …我遇到了 Angular Universal 和路由器动画的问题。我的案子很简单但很难解决（至少对我来说）。Universal 呈现 HTML 文档并将其发送到浏览器。然后角度浏览器应用程序被下载，当它下载并触发时，路由器插座动画被触发。它看起来很糟糕，好像组件正在重新加载/刷新。这只是第一个初始动画触发器的情况。
我创建了一个存储库来重现此问题：https ://github.com/BazylPL/angular-ssr-router-test
为了让它继续运行，我使用“npm run dev:ssr”命令。当使用网络限制时，这个问题很容易发现，例如“快速 3g”
有人知道我做错了什么还是内部设计问题？