无法使用Ionic2 RC3从app.module.ts解析模块

时间:2016-11-28 15:51:03

标签: ionic2

好的,我迷路了。几天来一直在搞乱这件事。我有一个在beta 10中运行的应用程序,我正在尝试迁移到RC3。我收到以下错误

C:\Projects\db>ionic build browser
******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

> dynamicbible@2.0.0 ionic:build C:\Projects\db
> ionic-app-scripts build

[10:33:33]  ionic-app-scripts 0.0.45
[10:33:33]  build prod started ...
[10:33:33]  clean started ...
[10:33:33]  clean finished in 5 ms
[10:33:33]  copy started ...
[10:33:33]  ngc started ...
[10:33:33]  copy finished in 192 ms
[10:33:37]  can't resolve module ../components/dcl-wrapper/dcl-wrapper.ts from C:/Projects/db/.tmp/app/app.module.ts
[10:33:37]  Error: Source file C:/Projects/db/.tmp/components/dcl-wrapper/dcl-wrapper.ts not present in program.,
            resolving symbol AppModule in C:/Projects/db/.tmp/app/app.module.ts, resolving symbol AppModule in
            C:/Projects/db/.tmp/app/app.module.ts
[10:33:37]  ngc failed
[10:33:37]  ionic-app-script task: "build"
[10:33:37]  Error: Error

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:build" "--"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! dynamicbible@2.0.0 ionic:build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!

但是dcl-wrapper.ts文件确实存在于它告诉我它没有的确切位置。以下是相关路径:

C:\Projects\db\src\components\dcl-wrapper\dcl-wrapper.ts
C:\Projects\db\src\app\app.module.ts`

这是我的app.module.ts文件

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import {SearchPage} from "../pages/search/search";
import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper.ts";

@NgModule({
    declarations: [
        MyApp,
        SearchPage,
        DclWrapper
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        SearchPage
    ],
    providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }

和我的dcl-wrapper.ts

//our root app component
import {Component, Compiler, ViewContainerRef, ViewChild, Input, ComponentRef, ComponentFactoryResolver, ChangeDetectorRef} from '@angular/core'

// Helper component to add dynamic components
@Component({
    selector: 'dcl-wrapper',
    template: `<div #target></div>`
})
export class DclWrapper {
    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input() type;
    @Input() data;
    cmpRef: ComponentRef<any>;
    private isViewInitialized: boolean = false;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler,
        private cdRef: ChangeDetectorRef) { }

    updateComponent() {
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }

        let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
        this.cmpRef = this.target.createComponent(factory)
        // to access the created instance use
        // this.compRef.instance.someProperty = 'someValue';
        // this.compRef.instance.someOutput.subscribe(val => doSomething());
        this.cmpRef.instance.item = this.data;

        this.cdRef.detectChanges();
    }

    ngOnChanges() {
        this.updateComponent();
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
        this.updateComponent();
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }
}

我已经验证文件确实存在于构建过程中创建的.tmp目录中的相同结构中。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

错误在线:

import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper.ts";

正确的方法是:

import {DclWrapper} from "../components/dcl-wrapper/dcl-wrapper";

(没有“.ts”)