Używam ASP.NET Core 2.0's JavaScript Services z Angular i próbuję zintegrować ng-bootstrap.Łączenie programu Ng-bootstrap z projektem ASP.NET Core JavaScript Services (Angular)
zainstalowałem ng-bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap
dodałem go do webpack.config.vendor.js:
...
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@ng-bootstrap/ng-bootstrap', // <-- down here
'zone.js',
];
...
dodałem NgbModule przywozowi z moich app.module.shared.ts:
...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
CommonModule,
NgbModule.forRoot(), // <-- this guy
HttpModule,
FormsModule,
RouterModule.forRoot([
...
])
]
})
export class AppModuleShared {
}
czyścić rozwiązanie i uruchom:
c:\...>webpack && webpack --config webpack.config.vendor.js
Wszystko w porządku.
Bieg:
c:\...>dotnet run
próby załadowania strony powoduje następujący błąd:
NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject.
To dość oczywisty sposób związane z wstępnym renderowaniu. Dlatego obecnie próbuję utworzyć makietę o rozmiarze ng-bootstrap, używając tylko tych komponentów, które chcę użyć, które nie będą wywoływać żadnych obietnic (lub będą używać fałszywych obietnic, które zostaną rozwiązane od razu) i nie wywołują DOM. To będzie importowany w app.module.server.ts ...
import { NgbModule } from './components/ng-bootstrap-mockup/ng-bootstrap'
... i średnia ...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
... zostaną wykorzystane w app.module.browser.ts, zamiast korzystania średnia w app.module.shared.ts.
Będą oczywiście być importowane zarówno w swoich modułach app ...
@NgModule({
...
imports: [
NgbModule.forRoot(),
...
]
})
...
Więc moje pytanie jest, ja czegoś brakuje? Czy istnieje lepszy sposób na poradzenie sobie z tym innym niż stworzenie makiety takiej jak ta opisana powyżej?
Domyślam się, że skoro nie korzystał z żadnych elementów NG-bootstrap treeshaking jest upuszczenie go i rendering po stronie serwera zawiedzie. Spróbuj dodać coś i zobacz, czy błąd się zmieni. – Yaser
@ Yaser Używam karuzeli. NgbModule pojawia się w 'ClientApp/dist/vendor.js'. –
Myślę, że jeśli użyjesz go do udostępniania funkcji, nie musisz jej używać z 'NgbModule.forRoot()', po prostu 'NgbModule', a następnie w każdej aplikacji masz zamiar dodać to tak:' NgbModule .forRoot() ' –