Im trying to do an hybrid app using AngularJS & Angular(2).
I already have a big AngularJS app and I just want to use a component from an Angular app.
Using https://angular.io/docs/ts/latest/guide/upgrade.html, I have created two new files
app.module.ts
import { UpgradeModule } from '#angular/upgrade/static';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
#NgModule({
imports: [
BrowserModule,
UpgradeModule,
],
})
export class AppModule {
ngDoBootstrap() {}
}
and main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { UpgradeModule } from '#angular/upgrade/static';
import { AppModule } from './app.module';
import App from './app.js';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, [App]);
});
and I have deleted the old bootstrap.js file
import angular from 'angular';
import App from './app';
angular.element(function() {
angular.bootstrap(document, [App], { strictDi: true });
});
The entry of my webpack build is now main.ts.
When I start my app, I have ana issue :
ERROR in ./client/app/main.ts
Module not found: Error: Can't resolve './app.module' in '/home/bsousa/Projects/S6/client/app'
# ./client/app/main.ts 5:21-44
Do someone know why ?
Here is the tsconfig.json, maybe it can help
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowJs": true,
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"allowUnreachableCode": true
},
"exclude": [
"node_modules"
]
}
Files structure
/
client
app
...
app.js
app.module.ts
main.ts
gulpfile.js
webpack.config.js
Well I don't know why the import did not work but when I set everything in the main.ts file, it works
import 'zone.js';
import 'angular';
import App from './app.js';
import { NgModule } from '#angular/core';
import { UpgradeModule } from '#angular/upgrade/static';
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
#NgModule({
imports: [
BrowserModule,
UpgradeModule,
],
})
export class AppModule {
ngDoBootstrap() {
}
}
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, [App.name], { strictDi: true });
});
My AngularJS is bootstrapped with Angular.
Now I'm trying to import my Angular app into my project as a node package but I think I have to do some improvements with the export.
I would like to import the root component, do I have to import the root module as well ?
Related
I used fuse template to build an angular project. I made it but when i reload the page website are broken. This is the mistake output:
Server Error
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
check the app.module.ts and add HashLocationStrategy
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
import {MyApp} from './myapp';
bootstrap(MyApp, [
ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
Here is my app.module.ts code=>
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '#angular/router';
import { MarkdownModule } from 'ngx-markdown';
import { FuseModule } from '#fuse';
import { FuseConfigModule } from '#fuse/services/config';
import { FuseMockApiModule } from '#fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';
const routerConfig: ExtraOptions = {
preloadingStrategy : PreloadAllModules,
scrollPositionRestoration: 'enabled'
};
#NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes, routerConfig),
// Fuse, FuseConfig & FuseMockAPI
FuseModule,
FuseConfigModule.forRoot(appConfig),
FuseMockApiModule.forRoot(mockApiServices),
// Core module of your application
CoreModule,
// Layout module of your application
LayoutModule,
// 3rd party modules that require global configuration via forRoot
MarkdownModule.forRoot({})
],
bootstrap : [
AppComponent,
],
})
export class AppModule
{
}
In our application we are using Angular(version 10) and ngrx(version 7). My app was running fine till I changed the tsconfig. I changed the below property:
"module": "commonjs"
to
"module": "es2020"
From then I started getting the below error:
Uncaught ReferenceError: Cannot access 'jobTreeReducers' before initialization
Following is the folder structure for the error raised module
The job-tree-store.module.ts is
import { NgModule } from "#angular/core";
import { StoreModule } from "#ngrx/store";
import { EffectsModule } from "#ngrx/effects";
import { CommonModule } from '#angular/common';
import { jobTreeReducers, JobTreeEffects } from "./index";
#NgModule({
imports: [
CommonModule,
StoreModule.forFeature('jobTree', jobTreeReducers),
EffectsModule.forFeature([JobTreeEffects]),
]
})
export class JobTreeStoreModule {}
I imported that and using in the App Module.
Please help me solve this issue.
Thanks...
Hi Guys i'm trying to make changes on an Ionic 3 App, i have downgraded my node and ran npm install but i keep getting this error on my browser any time i run ionic serve.
Please Help
Runtime Error: Cannot find module "./config"
Stack
Error: Cannot find module "./config"
at Object.<anonymous> (http://localhost:8100/build/main.js:95985:7)
at __webpack_require__ (http://localhost:8100/build/main.js:48:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:139326:70)
at __webpack_require__ (http://localhost:8100/build/main.js:48:30)
at http://localhost:8100/build/main.js:140:18
at http://localhost:8100/build/main.js:143:10
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { FormsModule } from "#angular/forms";
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '#ionic/storage';
import { HttpModule } from "#angular/http";
import { MyApp } from './app.component';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StorageService } from "../providers/storage";
import { Auth } from "../providers/auth";
import { Api } from "../providers/api";
import { DatabaseService } from "../providers/database";
import { AngularFireModule } from "angularfire2";
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { firebaseConfig } from './config';
import { ValidateProvider } from '../providers/validate/validate';
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
IonicStorageModule.forRoot(),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
StorageService,
DatabaseService,
Auth,
Api,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ValidateProvider
]
})
export class AppModule {}
I'm still new to this, and i know a'm just missing something please help out.
Thanks
in your app.module.ts
remove import { firebaseConfig } from './config';
or try to remove firebase and install it again : npm plugin remove
Just Make sure the Firebase Configuration is linked properly to the app.module.ts
Thanks
My application works fine in development, and ng build --prod --source-map builds application successfully. But when I try to access it in the browser, I get this error:
app.module.ts:47 Uncaught ReferenceError: env is not defined
at Object.zUnb (app.module.ts:47)
at u (bootstrap:81)
Here is my app.module.ts file (relevant part):
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { APP_BASE_HREF } from '#angular/common';
import { HTTP_INTERCEPTORS, HttpClient } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment as env } from '#env/environment'; // <- import env
import { CoreModule } from '#app/core/core.module';
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatSidenavModule,
CoreModule,
AppRoutingModule,
],
providers: [
{ provide: APP_BASE_HREF, useValue: env.baseHref } // <--- error
],
bootstrap: [AppComponent]
})
export class AppModule {}
And this is my tsconfig.json file where #env path is defined:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src/",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"#app/*": ["app/*"],
"#env/*": ["environments/*"]
}
}
}
I upgraded #angular-devkit/build-angular from version ~0.6.0 to ^0.13.3 and it solved the problem.
import { environment } as env from '#env/environment';
this should do the trick...
My app.module.ts file is:
import { IonTextAvatarComponent } from '../components/ion-text-avatar/ion-text-avatar';
import { ProgressBarComponent } from '../components/progress-bar/progress-bar';
import { FlashCardComponent } from '../components/flash-card/flash-card';
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { IonicStorageModule } from '#ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
im
import { ContentPage } from '../pages/content/content';
import { TrainingPage } from '../pages/training/training';
import { AuthProvider } from '../providers/auth/auth';
import { TrainingContentPage } from '../pages/training-content/training-content';
import { DataProvider } from '../providers/data/data';
import { HttpModule, Http } from '#angular/http';
import { HttpClientModule } from '#angular/common/http';
import { SanitizePipe } from '../pipes/sanitize/sanitize';
// import { TextAvatarDirective } from '../directives/text-avatar/text-avatar';
// import { IonTextAvatar } from 'ionic-text-avatar';
// import { NavController } from 'ionic-angular';
#NgModule({
declarations: [
MyApp,
HomePage,
ProgressBarComponent,
TrainingContentPage,
QuizPage,
FlashCardComponent,
SanitizePipe,
IonTextAvatarComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule,
HttpClientModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
TrainingContentPage,
QuizPage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider,
IonicStorageModule,
DataProvider,
HttpModule,
Http,
HttpClientModule,
]
})
export class AppModule {}
When i run ionic build browser --prod --release its showing:
[WARN] ionic build is for building web assets and takes no arguments. See ionic build --help.
Ignoring argument browser. Perhaps you meant ionic cordova build browser?
Running app-scripts build: --prod
[18:38:29] build prod started ...
[18:38:29] clean started ...
[18:38:29] clean finished in less than 1 ms
[18:38:29] copy started ...
[18:38:29] deeplinks started ...
[18:38:29] deeplinks finished in 46 ms
[18:38:29] ngc started ...
[18:38:32] typescript error
Type ProgressBarComponent in C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts
is part of the declarations of 2 modules: AppModule in
C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and ComponentsModule in
C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts! Please consider moving
ProgressBarComponent in C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts to a
higher module that imports AppModule in C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and
ComponentsModule in C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts. You can also
create a new NgModule that exports and includes ProgressBarComponent in
C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts then import that NgModule in
AppModule in C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and ComponentsModule in
C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts.
Error: The Angular AoT build failed. See the issues above
at C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
at <anonymous>
[18:38:32] copy finished in 3.73 s
I finally figured out the solution by myself. By removing componetModule.ts.