Base solution for your next web application
Open Closed

Angular Universal 9.1.X on AspNetZero 9.0.1 #9546


User avatar
0
besquare created

Prerequisites

Please answer the following questions before submitting an issue.

  • What is your product version? v9.0.1
  • What is your product type (Angular or MVC)? Angular 9.1.0
  • What is product framework type (.net framework or .net core)? NET Core 3.1

If issue related with ABP Framework

  • What is ABP Framework version? Latest contained in v9.0.1

If issue is about UI

  • Which theme are you using? METRONICS default theme
  • What are the theme settings? default

Hi i've integrated into Angular project the module Angular Universal. After some hours i've been able to compile project in dev:ssr and build:ssr , but when i'm open with browser the project give me an error:

In production mode i've two folders The dist/browser (this version works fine no issues) The dist/server (this version is affected by the issue)

I think there's something about referencing abp-ng2-module or abp-web-resources module which is not correctly linked.

Or there're something else wrong in configurations?

ReferenceError: abp is not defined at Function../src/AppPreBootstrap.ts.AppPreBootstrap.getApplicationConfig (/Users/projects/angular/dist/server/main.js:293304:23) at Function../src/AppPreBootstrap.ts.AppPreBootstrap.run (/Users/projects/angular/dist/server/main.js:293268:25) at /Users/projects/angular/dist/server/main.js:314770:79 at new ZoneAwarePromise (/Users/projects/angular/dist/server/main.js:291561:33) at Array.<anonymous> (/Users/projects/angular/dist/server/main.js:314767:16) at ApplicationInitStatus../node_modules/@angular/core/ivy_ngcc/bundles/core.umd.js.ApplicationInitStatus.runInitializers (/Users/projects/angular/dist/server/main.js:83640:54) at /Users/projects/angular/dist/server/main.js:84881:32 at _callAndReportToErrorHandler (/Users/projects/angular/dist/server/main.js:84991:26) at /Users/projects/angular/dist/server/main.js:84879:24 at ZoneDelegate../node_modules/zone.js/dist/zone-node.js.ZoneDelegate.invoke (/Users/projects/angular/dist/server/main.js:291034:30

tsconfig.server.json:

{
"extends": "./tsconfig.json", "baseUrl": "./", "module": "commonjs", "files": [ "./main.server.ts",
"../server.ts", ], "types": [], "include": [ "./src/**/*.d.ts",
"./typings.d.ts",
], "angularCompilerOptions": { "entryModule": "./root.server.module#RootServerModule", } }

tsconfig.json:

{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "esnext", "skipLibCheck": true, "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", "typeRoots": ["../node_modules/@types"], "baseUrl": ".", "paths": { "@app/": ["./app/"], "@account/": ["./account/"], "@shared/": ["./shared/"], "@node_modules/": ["../node_modules/"], "@angular/": ["../node_modules/@angular/"], "@metronic/": ["./assets/metronic/"] } }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictTemplates": true, "strictInputTypes": false, "strictAttributeTypes": false, "strictOutputEventTypes": false, "strictDomEventTypes": false, "strictLiteralTypes": false, "strictInjectionParameters": false, } }

Can somebody skilled on Angular or experienced on Universal can help me?

I need to improve the first load of Angular solution because used on public website.

Thanks, Max Baki


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @besquare

    AspNet Zero doesn't support Angular Universal officially. abp is defined in abp-web-resources package. Can you somehow load abp.js from abp-web-resource before loading your universal app ? Similar to jQuery if you are using it in your app.

  • User Avatar
    0
    besquare created

    Hi @ismcagdas,

    i've been able including with require to resolve all dependencies, but not node response is something like NotImplemented.

    I've found two articles :

    First is this: https://github.com/aspnetboilerplate/aspnetboilerplate/issues/4711

    Implemented but the canvas module is not compatible with Angular 9.

    Second is yours from Volosoft:

    https://volosoft.com/blog/Building-a-simple-Angular-Universal-application-with-ASP.NET-Boi

    I need to use AspNetZero - Angular project in SSR mode, there's any suggestion or support to achive results?

    Because starting angular project since it is a SPA take very long time to load first time.

    Thanks, Bests Max Baki

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @besquare

    You are right, initial load time might be long according to deployed environment. The article we wrote was for Angular 5.x. Could you create an issue on GitHub, we can try to update same article for Angular 10.x.

    Since I haven't worked on Angular Universal for a long time, I can't suggest you anything right now.