Angular2 nhập đường dẫn tuyệt đối hoặc đường dẫn tùy chỉnh (kiểu 2)

Question

Trong dự án angular2 của chúng tôi, chúng tôi đặt tất cả các tệp ts của mô hình vào một thư mục cụ thể:/app/common/model/*. Tôi có thể gọi chúng trong các thành phần của tôi với đường dẫn của người thân, nhưng nó rất mất thời gian. Vì vậy, 2 giải pháp, tốt nhất là đường dẫn tùy chỉnh: StackOverflow: Relative Paths for SystemJS & ES module imports. Nhưng IDE của tôi không thể tìm thấy đường dẫn. Dưới đây là tsconfig tôi:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "outDir": "built", 
    "baseUrl": ".", 
    "paths": { 
     "mymodel/*": [ 
     "app/common/model/*" 
     ] 
    } 
    } 
} 

Trong thành phần của tôi: import { Address } from 'mymodel/address.model';

IDE: [ts] Không thể tìm thấy mô-đun .... tôi đã cố gắng có hoặc không có * trong con đường

giải pháp thứ hai: Stackoverflow: Angular 2, imports between different folders

IDE và biên dịch là ok, với đường dẫn đầy đủ trong thành phần: import { Address } from 'common/model/address.model';

Và tsconfig:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "outDir": "built", 
    "baseUrl": ".", 
    "paths": { 
     "*": [ 
     "app/*", 
     "node_modules/*" 
     ] 
    } 
    } 
} 

Nhưng chúng tôi có 404 trên tải trang cho tất cả các mẫu. Có thể cấu hình trong tệp systemjs?

Trong cả hai trường hợp, tôi nghĩ rằng thông số "outdir" là vấn đề và chúng tôi đang thiếu thứ gì đó.

Rất cám ơn bạn đã trợ giúp!

Kính trọng,

nguyên cảo: 2.0.6 góc: 2.0.0

Answer 1

Sau khi đấu tranh bằng cách tìm kiếm trên Internet n cố gắng để hiểu những gì chính xác vấn đề và cố gắng lựa chọn xử lý sự cố khác nhau, tôi đến để biết baseUrl và Đường dẫn cách làm việc cùng nhau

Lưu ý: giải pháp này là dành cho góc Cli 1.x. Không chắc về công cụ khác,

Nếu bạn sử dụng baseUrl: "." như dưới đây nó hoạt động trong VScode nhưng không phải khi biên dịch

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "baseUrl": ".", 
    "paths": { 
     "@myproject/*": ["src/app/*"] 
    }  
} 

Theo hiểu biết của tôi và ứng dụng làm việc của tôi và kiểm tra trong góc aio mã, tôi đề nghị sử dụng như baseUrl: "" src như dưới đây

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "baseUrl": "src", 
    "paths": { 
     "@myproject/*": ["app/*"], 
     "testing/*": ["testing/*"] 
    }  
} 

Bằng cách có URL cơ sở làm nguồn (thư mục src), trình biên dịch xử lý đúng mô-đun.

Tôi hy vọng điều này sẽ giúp mọi người giải quyết loại vấn đề này.